define(function(require, exports, module) {

  // var Backbone = require('backbone');
  var $ = require('jquery');
  var _ = require('lodash');
  // var jsonview = require('jsonview');
  var tmpl = require('text!../tmpl.html');
  var littleCanvas = require('hy5b/frontend/canvas/littleCanvas')
  var util = require('hy5b/graph/index')
  var animation = require('hy5b/animation/index')
  var composite = require('tmpl/composite/index')

  let globalCompositeOperation = ''
  const T = 2000

  function main() {
    var $app = $('<div id="app">');
    $('#main').html($app);

    $app.append(tmpl);

    class hello {
      constructor(el) {
        this.t = 0;

        this.width = 109
        this.height = 221
        this.image = new Image()
        this.image.src = '/assets/img/up.png'

        this.image2 = new Image()
        this.image2.src = '/assets/img/大楼刷.png'

        this.lc = new littleCanvas().setSize(800, 600)
        $(el).append(this.lc.pop())

        this.animate = new animation({
          props: {
            h: {
              start: 300,
              end: 0,
              infinity: true,
              duration: 700
            }
          }
        })
      }
  
      step() {
        this.timer = requestAnimationFrame(this.step.bind(this))
        this.draw()
        if (this.t >= T) { //下次让animation返回一个最小周期
          this.t = 0
        } else {
          this.t += animation.FRAME60
        }
      }

      draw() {
        this.lc.clear()

        this.lc.draw(ctx => {
          ctx.drawImage(this.image, 100, 100, this.width, this.height)
        })

        this.lc.ctx.globalCompositeOperation = globalCompositeOperation

        var animateProps = this.animate.getStaticFrame(this.t)

        this.lc.draw(ctx => {
          ctx.drawImage(this.image2, 113, animateProps.h.now, 110 * 0.76, 160 * 0.76)
        })
      }
      
      render() {
        this.destroy()
        this.step()
      }
      
      destroy() {
        if (this.timer) {
          cancelAnimationFrame(this.timer)
        }
      }
    }

    new hello($('#change-color-effect')).render()

    composite(function setVal(val) { globalCompositeOperation = val }, $app)
  }

  return main;
})
